<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from 'vue-router';
import { getItemById } from "../services/api";
import DOMPurify from 'dompurify';

const route = useRoute();
const productId = route.params.id;
const product = ref({});

onMounted(() => {
  fetchProduct();
    // 确保 DOM 更新后再绑定事件
    setTimeout(() => {
      addImageClickEvent();
    }, 500);
});

// 手动绑定 img 点击事件
const addImageClickEvent = () => {
  document.querySelectorAll('.product-content img').forEach(img => {
    img.addEventListener('click', () => showImage(img));
  });
};


const fetchProduct = async () => {
  const res = await getItemById(productId);
  product.value = res;
};

const sanitizeHTML = (html) => {
  return DOMPurify.sanitize(html);
};
</script>

<template>
 <div class="bg">
  <div class="product-detail">
    <!-- 标题 -->
         <!-- 产品标题、价格和描述 -->
         <div class="product-info">
          <h2>{{ product.Title }}</h2>
          <p class="price">{{ product.Price }}</p>
          <p class="description">{{ product.Introduce }}</p>
        </div>
  

    <!-- 详情内容 -->
    <div class="product-content" v-html="sanitizeHTML(product.Content)"></div>
  </div>
 </div>
</template>

<style scoped>
.product-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 标题部分 */
.product-title {
  background-color: white;
  padding: 15px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* 内容部分 */
.product-content {
  background-color: white;
  padding: 15px;
  font-size: 16px;
  color: black;
  border-radius: 8px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  line-height: 1.6;
}

/* 解析的 HTML 样式 */
.product-content h1 {
  font-size: 22px;
  font-weight: bold;
  margin-top: 10px;
}

.product-content a {
  color: #007bff;
  text-decoration: underline;
}

.product-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 8px;
}

.bg{
  width: 100%;
  min-height: 1000px;
  height: auto;
  background: url("@/assets/images/loginbg.jpg") no-repeat center center;
  background-size: cover;
}

.product-content video {
  display: block;
  width: 100%;
  max-height: 300px;
  margin: 10px 0;
  border-radius: 8px;
}

/* 产品信息 */
.product-info {
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
  margin-bottom: 20px;
}

.product-info h2 {
  font-size: 24px;
  margin: 0 0 10px;
}

.product-info .price {
  font-size: 22px;
  font-weight: bold;
  color: #e74c3c;
  margin: 10px 0;
}

.product-info .description {
  font-size: 16px;
  color: #666;
}



@media (max-width: 600px) {
  .product-title {
    font-size: 20px;
  }
  .product-content {
    font-size: 14px;
  }
}
</style>


<script>
function showImage(img) {
  // 创建一个模态框
  let modal = document.createElement("div");
  modal.style.position = "fixed";
  modal.style.top = "0";
  modal.style.left = "0";
  modal.style.width = "100%";
  modal.style.height = "100%";
  modal.style.backgroundColor = "rgba(0,0,0,0.8)";
  modal.style.display = "flex";
  modal.style.justifyContent = "center";
  modal.style.alignItems = "center";
  modal.style.zIndex = "1000";
  
  // 创建放大的图片
  let enlargedImg = document.createElement("img");
  enlargedImg.src = img.src;
  enlargedImg.style.maxWidth = "90%";
  enlargedImg.style.maxHeight = "90%";
  enlargedImg.style.borderRadius = "10px";
  enlargedImg.style.boxShadow = "0 0 20px rgba(255,255,255,0.5)";

  // 点击关闭模态框
  modal.onclick = function () {
    document.body.removeChild(modal);
  };

  // 添加到页面
  modal.appendChild(enlargedImg);
  document.body.appendChild(modal);
}
</script>


